displayName 설정

React 컴포넌트를 개발하다 보면, 디버깅이나 개발 도구를 사용할 때 컴포넌트의 이름이 제대로 표시되지 않아 불편함을 겪을 수 있습니다. 이 문제를 해결하기 위해 displayName을 설정하는 방법을 알아보겠습니다. displayName은 컴포넌트의 디버깅 이름을 지정하여 개발자 경험을 향상시켜 줍니다.

displayName의 필요성

리액트 개발 도구를 사용할 때, 컴포넌트의 이름이 명확하게 표시되지 않으면 컴포넌트 트리 구조를 파악하기 어려워집니다. 이는 특히 여러 개의 무명 함수형 컴포넌트를 사용할 때 더 두드러집니다. displayName을 설정하면 이러한 문제를 해결할 수 있습니다.

함수형 컴포넌트에서 displayName 설정하기

기본적으로 함수형 컴포넌트는 함수 이름을 통해 컴포넌트의 이름을 설정합니다. 하지만, 익명 함수나 고차 컴포넌트를 사용할 때는 명확한 이름을 제공하기 위해 displayName을 설정할 수 있습니다.

기본 함수형 컴포넌트

function MyComponent() {
  return <div>My Component</div>;
}

고차 컴포넌트에서 displayName 설정하기

고차 컴포넌트를 사용할 때는 displayName을 설정해주는 것이 중요합니다. 고차 컴포넌트는 컴포넌트를 감싸는 컴포넌트로, 원래 컴포넌트의 이름이 아닌 고차 컴포넌트의 이름이 표시될 수 있습니다.

function withEnhancement(WrappedComponent) {
  function EnhancedComponent(props) {
    return <WrappedComponent {...props} />;
  }

  EnhancedComponent.displayName = `WithEnhancement(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return EnhancedComponent;
}

// 사용 예시
const EnhancedMyComponent = withEnhancement(MyComponent);

이렇게 설정하면 EnhancedMyComponent는 WithEnhancement(MyComponent)라는 이름으로 표시됩니다.

클래스형 컴포넌트에서 displayName 설정하기

클래스형 컴포넌트에서도 displayName을 설정할 수 있습니다. 클래스형 컴포넌트는 클래스의 이름을 통해 컴포넌트의 이름을 설정합니다.

기본 클래스형 컴포넌트

class MyClassComponent extends React.Component {
  render() {
    return <div>My Class Component</div>;
  }
}

고차 컴포넌트에서 displayName 설정하기

function withEnhancement(WrappedComponent) {
  class EnhancedComponent extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }

  EnhancedComponent.displayName = `WithEnhancement(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;

  return EnhancedComponent;
}

// 사용 예시
const EnhancedMyClassComponent = withEnhancement(MyClassComponent);